<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue/vue.js"></script>
		<script src="vue/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/parent">父路由组件</router-link>
			<router-view></router-view>
		</div>
		<template id="tmp">
			<div>
				<p>父路由组件</p>
				<router-link to="/parent/login">登陆</router-link>
				<router-link to="/parent/register">注册</router-link>
				<router-view></router-view>
			</div>
		</template>
		<script type="text/javascript">
			//父路由组件
			var parent = {
				template: "#tmp"
			}
			//登陆注册组件
			var login = {
				template: "<div>登陆页面</div>"
			}
			var register = {
				template: "<div>注册页面</div>"
			}
			//创建路由对象
			var routerObj = new VueRouter({
				routes:[
					{
						path:'/parent',
						component:parent,
						children:[
							//这里面的path属性不用/,否则永远以根路径进行请求
							{path:'login',component:login},
							{path:'register',component:register}
						]
					}
				]
			})
			var vm = new Vue({
				el: "#app",
				data:{},
				methods:{},
				//将路由规则对象，注册到vm实例上，用来监听 URL 地址的变化来做相应的展示
				router:routerObj
			})
		</script>
	</body>
</html>
